<template>
  <div>
    <span style="float: right;margin-right: 200px">当前用户：{{userInfo.username}}</span><br><br>
    <el-form :inline="true" :model="search" class="demo-form-inline" ref="ruleForm">
      <el-form-item label="appid" prop="appid">
        <el-select v-model="search.appid">
          <el-option v-for="a in appids" :key="a.id" :value="a.id" :label="a.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="系统版本" prop="versionsId">
        <el-select v-model="search.versionsId">
          <el-option v-for="v in versionsIds" :key="v.id" :value="v.id" :label="v.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道选择" prop="typeId">
        <el-select v-model="search.typeId">
          <el-option v-for="t in typeIds" :key="t.id" :value="t.id" :label="t.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间" prop="datea">
        <el-date-picker v-model="search.datea" placeholder="开始时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="-" prop="dateb">
        <el-date-picker v-model="search.dateb" placeholder="结束时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="公司名称" prop="key">
        <el-input v-model="search.key" placeholder="公司名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="add" style="float:left;margin-left: 200px">添加渠道</el-button>
    <el-button type="primary" @click="dialogVisible=true" style="float:left;margin-left: 20px">导入</el-button>
    <el-button type="primary" @click="excel" style="float:left;margin-left: 200px">渠道类型统计导出</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="created" label="添加日期" width="120"></el-table-column>
      <el-table-column prop="aname" label="appid" width="120"></el-table-column>
      <el-table-column prop="vname" label="系统版本" width="120"></el-table-column>
      <el-table-column prop="tname" label="渠道类型" width="120"></el-table-column>
      <el-table-column prop="name" label="渠道名称" width="120"></el-table-column>
      <el-table-column prop="qudao" label="渠道号" width="120"></el-table-column>
      <el-table-column prop="fname" label="公司名称" width="120"></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="search.page"
        :page-size="search.pageSize"
        layout="total, prev, pager, next"
        :total="search.total">
      </el-pagination>
    </div>
    <el-dialog
      title="文件导入"
      :visible.sync="dialogVisible"
      width="30%">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:8088/channel/upload"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ListView',
  data () {
    return {
      dialogVisible: false,
      tableData: [],
      selected: [],
      appids: [],
      versionsIds: [],
      typeIds: [],
      search: {
        page: 1,
        pageSize: 3,
        key: '',
        total: 0,
        appid: null,
        versionsId: null,
        typeId: null,
        datea: null,
        dateb: null
      },
      userInfo: {
        username: ''
      }
    }
  },
  methods: {
    // 类型统计导出
    excel () {
      window.open('http://localhost:8088/center/excel')
    },
    // 上传文件
    submitUpload () {
      this.$refs.upload.submit()
      this.query()
    },
    // 添加页面
    add () {
      this.$router.push('/save')
    },
    // 重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 页码
    handleCurrentChange (val) {
      this.search.page = val
      this.query()
    },
    // 每页条数
    handleSizeChange (val) {
      this.search.pageSize = val
      this.query()
    },
    // 列表
    query () {
      this.axios.post('/channelvo/page', this.search).then(res => {
        this.tableData = res.data.jdata.records
        this.search.page = res.data.jdata.current
        this.search.pageSize = res.data.jdata.size
        this.search.total = res.data.jdata.total
      })
    },
    // 选中行
    handleSelectionChange (val) {
      this.selected = val
    }
  },
  created () {
    // 用户信息
    this.userInfo = this.$store.state.userInfo
    // 列表
    this.query()
    // appid下拉框
    this.axios.get('/center/list', { params: { type: 1 } }).then(res => {
      if (res.data.code === 200) {
        this.appids = res.data.jdata
      }
    })
    // 系统版本下拉框
    this.axios.get('/center/list', { params: { type: 2 } }).then(res => {
      if (res.data.code === 200) {
        this.versionsIds = res.data.jdata
      }
    })
    // 渠道选择下拉框
    this.axios.get('/center/list', { params: { type: 3 } }).then(res => {
      if (res.data.code === 200) {
        this.typeIds = res.data.jdata
      }
    })
  }
}
</script>

<style scoped>

</style>
